<template>
  <div id="form-list">
    <el-button type="primary" size="small" @click="$router.push({path:'/formBuild'})">新增</el-button>
    <el-button type="danger" size="small" @click="delectVisible = true">删除</el-button>
    <el-table
      :data="tableFormList"
      border
      class="form-table"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40" header-align="center"></el-table-column>
      <el-table-column
        prop="name"
        label="表单名称">
      </el-table-column>
      <el-table-column
        prop="formKey"
        label="表单KEY">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间">
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click.native="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination pull-right block">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog title="提示" :visible.sync="delectVisible" width="30%">
      <span>确定要删除表单吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delectVisible = false">取 消</el-button>
        <el-button type="primary" @click="delectform">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
export default {
  data() {
    return {
      total:1,
      page:1,
      pageSize:10,
      delectVisible:false,
      tableFormList:[],
      multipleSelection:[],
    }
  },
  mounted(){
    this.getFormList();
  },
  methods: {
    getFormList(){
      this.http.post('/api/form/query',{
        P_NO:this.page,
        P_SIZE:this.pageSize
      })
      .then((res) => {
        let data = res.data;
        this.tableFormList = data.rows;
        this.total = data.records;
      })
      .catch(()=>{
        this.$message.error('获取表单数据失败！');
      })
    },
    handleCurrentChange(val){
      this.page = val;
      this.getFormList();
    },  
    handleEdit(data){
      this.$router.push({path:"/formEdit/"+data.id});
    },
    handleSelectionChange(val){
      let arr = [];
      val.map(item => {
        arr.push(item.id);
      });
      this.multipleSelection = arr;
    },
    delectform(){
      this.http.post("/api/form/deleteBatchIds",{
        ids:this.multipleSelection.join()
      })
      .then(res => {
        console.log(res);
        if(res.data.code === 200){
          this.$message.success(res.data.msg);
          this.delectVisible = false;
          this.getFormList();
        }
      })
    }
  }
}
</script>

<style lang="scss">
  #form-list{
    padding: 0 20px;
    .form-table{
      margin-top: 20px
    }
    .pagination{
      padding-top: 20px;
    }
  }
</style>
